<template>
   <div class="zhongxing">
    <div class="box">
        <p>欢迎来到韭黄仓库，<span>{{ tableData.nickName }}</span></p>
        <p>你当前的角色是：<span>{{ tableData.role }}</span></p>
        <p class="time">{{ Time.timeData }}/ {{ Time.time01 }}</p>
        <img src="../assets/imgs/bg1.jpg" alt="">
    </div>
   </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import {get_user_info} from '../../api/index'
const Time = ref({
    timeData:'',
    time01:''
})
const tableData = ref({
    nickName:'',
    role:'',
})
const time =  ()=>{
    const data = new Date();
    const year = data.getFullYear();
    const month = String(data.getMonth() + 1).padStart(2, '0');
    const day = String(data.getDate()).padStart(2, '0');
    const hours = String(data.getHours()).padStart(2, '0');
    const minutes = String(data.getMinutes()).padStart(2, '0');
    const seconds = String(data.getSeconds()).padStart(2, '0');
    let timeData = `${year}-${month}-${day}`;
    let time01 = `${hours}:${minutes}:${seconds}`;
    Time.value.timeData = timeData;
    Time.value.time01 = time01;
    return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
}
onMounted( async()=>{
    const timer = setInterval(()=>{
        time();
    },1000)

    let id = localStorage.getItem('TOKEN')
   await get_user_info({id}).then(res=>{
    // console.log(res);
    let {code,result} = res
    if(code == 200){
        let arr = result.map((item: any) => {
            if(item.role==1){
                item.role='管理员'
            }
            if(item.role==0){
                item.role='超级管理员'
            }
            return {
                account: item.account,
                nickName: item.nickName,
                role:item.role,
            };
        });
        if (arr.length > 0) {
                tableData.value = arr[0]; // 只取第一个对象
            }
           // console.log(tableData.value); // 调试信息
        }
    
   })
})
</script>

<style lang="less">
.zhongxing{
    width: 80%;
    height: 600px;
    background-color: #fff ;
    margin: 0 auto;
    display: flex;
    align-items: center;
    .box{
        width: 100%;
        flex-direction: column;
        align-items: center;
        display: flex;
    }
    p{
        font-size: 30px;
        span{
            font-weight: bolder;
        }
    }
    img{
        width: 60%;
        height: 30%;
    }
    .time{
        color: orange;
    }
}
</style>